<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智能单据 系统</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            success: '#52C41A',
            warning: '#FAAD14',
            danger: '#FF4D4F',
            neutral: {
              100: '#F5F5F5',
              200: '#E5E5E5',
              300: '#D4D4D4',
              400: '#A3A3A3',
              500: '#737373',
              600: '#525252',
              700: '#404040',
              800: '#262626',
              900: '#171717',
            }
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
          boxShadow: {
            'card': '0 4px 12px rgba(0, 0, 0, 0.05)',
            'card-hover': '0 6px 16px rgba(0, 0, 0, 0.08)',
          }
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .receipt-border {
        background-image: linear-gradient(to right, #D4D4D4 50%, transparent 50%);
        background-position: bottom;
        background-size: 16px 1px;
        background-repeat: repeat-x;
      }
      .transition-bg {
        transition: background-color 0.2s ease-in-out;
      }
      .transition-transform {
        transition: transform 0.2s ease-in-out;
      }
    }
  </style>
</head>
<body class="bg-neutral-100 font-sans text-neutral-800 min-h-screen">
  <!-- 顶部导航 -->
  <header class="bg-white shadow-sm sticky top-0 z-50">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <div class="flex items-center space-x-2">
        <i class="fa fa-file-text-o text-primary text-2xl"></i>
        <h1 class="text-xl font-semibold text-neutral-800">智能单据系统</h1>
      </div>
      
      <div class="flex items-center space-x-6">
        <button class="text-neutral-600 hover:text-primary transition-bg">
          <i class="fa fa-bell-o"></i>
        </button>
        <div class="flex items-center space-x-2">
          <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
          <span class="text-sm font-medium">张经理</span>
        </div>
      </div>
    </div>
  </header>

  <main class="container mx-auto px-4 py-6 md:py-8">
    <!-- 路径导航 -->
    <div class="flex items-center text-sm text-neutral-500 mb-6">
      <a href="#" class="hover:text-primary">首页</a>
      <i class="fa fa-angle-right mx-2 text-neutral-400 text-xs"></i>
      <a href="#" class="hover:text-primary">单据管理</a>
      <i class="fa fa-angle-right mx-2 text-neutral-400 text-xs"></i>
      <span class="text-neutral-700">销售单据</span>
    </div>

    <!-- 操作栏 -->
    <div class="bg-white rounded-lg shadow-card p-4 mb-6 flex flex-wrap items-center justify-between gap-4">
      <div class="flex items-center space-x-4">
        <h2 class="text-lg font-semibold">销售单据 #20230907001</h2>
        <span class="px-2 py-1 bg-success/10 text-success text-xs rounded-full">已审核</span>
      </div>
      
      <div class="flex items-center space-x-3">
        <button class="px-3 py-1.5 border border-neutral-300 rounded text-sm hover:bg-neutral-100 transition-bg flex items-center">
          <i class="fa fa-print mr-1.5"></i> 打印
        </button>
        <button class="px-3 py-1.5 border border-neutral-300 rounded text-sm hover:bg-neutral-100 transition-bg flex items-center">
          <i class="fa fa-download mr-1.5"></i> 导出
        </button>
        <button class="px-3 py-1.5 bg-primary text-white rounded text-sm hover:bg-primary/90 transition-bg flex items-center">
          <i class="fa fa-edit mr-1.5"></i> 编辑
        </button>
      </div>
    </div>

    <!-- 单据内容 -->
    <div class="bg-white rounded-lg shadow-card p-6 md:p-8 mb-6">
      <!-- 单据头部信息 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
        <div>
          <h3 class="text-sm text-neutral-500 mb-2">客户信息</h3>
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <p class="text-xs text-neutral-500 mb-1">客户名称</p>
              <p class="font-medium">北京科技创新有限公司</p>
            </div>
            <div>
              <p class="text-xs text-neutral-500 mb-1">联系人</p>
              <p>李小明</p>
            </div>
            <div>
              <p class="text-xs text-neutral-500 mb-1">联系电话</p>
              <p>138****5678</p>
            </div>
            <div>
              <p class="text-xs text-neutral-500 mb-1">电子邮箱</p>
              <p>lixm@example.com</p>
            </div>
          </div>
        </div>
        
        <div>
          <h3 class="text-sm text-neutral-500 mb-2">单据信息</h3>
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <p class="text-xs text-neutral-500 mb-1">单据日期</p>
              <p>2023-09-07</p>
            </div>
            <div>
              <p class="text-xs text-neutral-500 mb-1">预计交货日期</p>
              <p>2023-09-15</p>
            </div>
            <div>
              <p class="text-xs text-neutral-500 mb-1">销售员</p>
              <p>王销售</p>
            </div>
            <div>
              <p class="text-xs text-neutral-500 mb-1">付款方式</p>
              <p>银行转账</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 分隔线 -->
      <div class="border-t border-neutral-200 my-6"></div>

      <!-- 商品列表 -->
      <div class="mb-8">
        <h3 class="text-sm text-neutral-500 mb-4">商品明细</h3>
        
        <div class="overflow-x-auto">
          <table class="min-w-full">
            <thead>
              <tr class="bg-neutral-50 text-left text-xs text-neutral-500 uppercase tracking-wider">
                <th class="px-3 py-3 rounded-l-lg">序号</th>
                <th class="px-3 py-3">商品名称</th>
                <th class="px-3 py-3">规格型号</th>
                <th class="px-3 py-3">单位</th>
                <th class="px-3 py-3">数量</th>
                <th class="px-3 py-3">单价(元)</th>
                <th class="px-3 py-3">金额(元)</th>
                <th class="px-3 py-3 rounded-r-lg">备注</th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-neutral-200">
              <tr class="hover:bg-neutral-50 transition-bg">
                <td class="px-3 py-4 text-sm">1</td>
                <td class="px-3 py-4 text-sm">智能控制器</td>
                <td class="px-3 py-4 text-sm">IC-2000</td>
                <td class="px-3 py-4 text-sm">台</td>
                <td class="px-3 py-4 text-sm">10</td>
                <td class="px-3 py-4 text-sm">1,250.00</td>
                <td class="px-3 py-4 text-sm font-medium">12,500.00</td>
                <td class="px-3 py-4 text-sm">标准配置</td>
              </tr>
              <tr class="hover:bg-neutral-50 transition-bg">
                <td class="px-3 py-4 text-sm">2</td>
                <td class="px-3 py-4 text-sm">传感器模块</td>
                <td class="px-3 py-4 text-sm">SM-300</td>
                <td class="px-3 py-4 text-sm">个</td>
                <td class="px-3 py-4 text-sm">20</td>
                <td class="px-3 py-4 text-sm">320.50</td>
                <td class="px-3 py-4 text-sm font-medium">6,410.00</td>
                <td class="px-3 py-4 text-sm"></td>
              </tr>
              <tr class="hover:bg-neutral-50 transition-bg">
                <td class="px-3 py-4 text-sm">3</td>
                <td class="px-3 py-4 text-sm">通信模块</td>
                <td class="px-3 py-4 text-sm">CM-500</td>
                <td class="px-3 py-4 text-sm">个</td>
                <td class="px-3 py-4 text-sm">5</td>
                <td class="px-3 py-4 text-sm">890.00</td>
                <td class="px-3 py-4 text-sm font-medium">4,450.00</td>
                <td class="px-3 py-4 text-sm">含天线</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 分隔线 -->
      <div class="border-t border-neutral-200 my-6"></div>

      <!-- 金额信息 -->
      <div class="flex flex-col md:flex-row justify-end gap-8">
        <div class="w-full md:w-auto">
          <h3 class="text-sm text-neutral-500 mb-2">备注信息</h3>
          <div class="p-3 border border-neutral-200 rounded-lg min-w-[240px] min-h-[80px] text-sm">
            请在收到货物后3个工作日内完成验收，如有质量问题请及时联系。
          </div>
        </div>
        
        <div class="w-full md:w-auto">
          <div class="grid grid-cols-2 gap-x-8 gap-y-2 text-sm">
            <div class="text-neutral-500 text-right">小计：</div>
            <div class="font-medium">23,360.00 元</div>
            
            <div class="text-neutral-500 text-right">折扣：</div>
            <div class="font-medium">-1,168.00 元</div>
            
            <div class="text-neutral-500 text-right">税额(13%)：</div>
            <div class="font-medium">2,874.96 元</div>
            
            <div class="text-neutral-700 font-medium text-right pt-2 border-t border-neutral-200">总计：</div>
            <div class="text-primary font-semibold text-right pt-2 border-t border-neutral-200">25,066.96 元</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 审批记录 -->
    <div class="bg-white rounded-lg shadow-card p-6 mb-6">
      <h3 class="text-base font-semibold mb-4">审批记录</h3>
      
      <div class="relative">
        <!-- 时间线 -->
        <div class="absolute left-3 top-0 bottom-0 w-0.5 bg-neutral-200"></div>
        
        <div class="space-y-6">
          <!-- 审批步骤1 -->
          <div class="relative pl-10">
            <div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-success flex items-center justify-center z-10">
              <i class="fa fa-check text-white text-xs"></i>
            </div>
            <div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
              <div>
                <p class="font-medium">提交单据</p>
                <p class="text-sm text-neutral-500">王销售</p>
              </div>
              <p class="text-sm text-neutral-500">2023-09-07 09:30:15</p>
            </div>
            <p class="text-sm mt-1">销售单据已提交，等待审核</p>
          </div>
          
          <!-- 审批步骤2 -->
          <div class="relative pl-10">
            <div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-success flex items-center justify-center z-10">
              <i class="fa fa-check text-white text-xs"></i>
            </div>
            <div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
              <div>
                <p class="font-medium">部门经理审核</p>
                <p class="text-sm text-neutral-500">张经理</p>
              </div>
              <p class="text-sm text-neutral-500">2023-09-07 11:45:30</p>
            </div>
            <p class="text-sm mt-1">同意此销售单据，按流程执行</p>
          </div>
          
          <!-- 审批步骤3 -->
          <div class="relative pl-10">
            <div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-success flex items-center justify-center z-10">
              <i class="fa fa-check text-white text-xs"></i>
            </div>
            <div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
              <div>
                <p class="font-medium">财务审核</p>
                <p class="text-sm text-neutral-500">刘会计</p>
              </div>
              <p class="text-sm text-neutral-500">2023-09-07 14:20:05</p>
            </div>
            <p class="text-sm mt-1">审核通过，符合公司财务规定</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 相关单据 -->
    <div class="bg-white rounded-lg shadow-card p-6">
      <h3 class="text-base font-semibold mb-4">相关单据</h3>
      
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="border border-neutral-200 rounded-lg p-4 hover:shadow-card-hover transition-transform hover:-translate-y-1 cursor-pointer">
          <div class="flex items-center justify-between mb-3">
            <div class="flex items-center">
              <i class="fa fa-file-pdf-o text-danger mr-2"></i>
              <span class="font-medium">采购合同</span>
            </div>
            <span class="text-xs bg-neutral-100 px-2 py-0.5 rounded">PDF</span>
          </div>
          <p class="text-sm text-neutral-500 mb-3">编号：CG-20230907001</p>
          <div class="flex items-center justify-between text-xs text-neutral-400">
            <span>2023-09-07</span>
            <span>2.4MB</span>
          </div>
        </div>
        
        <div class="border border-neutral-200 rounded-lg p-4 hover:shadow-card-hover transition-transform hover:-translate-y-1 cursor-pointer">
          <div class="flex items-center justify-between mb-3">
            <div class="flex items-center">
              <i class="fa fa-file-excel-o text-success mr-2"></i>
              <span class="font-medium">产品清单</span>
            </div>
            <span class="text-xs bg-neutral-100 px-2 py-0.5 rounded">XLSX</span>
          </div>
          <p class="text-sm text-neutral-500 mb-3">编号：CP-20230907001</p>
          <div class="flex items-center justify-between text-xs text-neutral-400">
            <span>2023-09-07</span>
            <span>1.1MB</span>
          </div>
        </div>
        
        <div class="border border-neutral-200 rounded-lg p-4 hover:shadow-card-hover transition-transform hover:-translate-y-1 cursor-pointer">
          <div class="flex items-center justify-between mb-3">
            <div class="flex items-center">
              <i class="fa fa-file-image-o text-primary mr-2"></i>
              <span class="font-medium">产品图片</span>
            </div>
            <span class="text-xs bg-neutral-100 px-2 py-0.5 rounded">ZIP</span>
          </div>
          <p class="text-sm text-neutral-500 mb-3">编号：TP-20230907001</p>
          <div class="flex items-center justify-between text-xs text-neutral-400">
            <span>2023-09-07</span>
            <span>8.7MB</span>
          </div>
        </div>
      </div>
    </div>
  </main>

  <footer class="bg-white border-t border-neutral-200 mt-10">
    <div class="container mx-auto px-4 py-6 text-center text-sm text-neutral-500">
      <p>© 2023 智能单据管理系统 版权所有</p>
    </div>
  </footer>

  <script>
    // 简单的交互效果实现
    document.addEventListener('DOMContentLoaded', function() {
      // 为按钮添加点击效果
      const buttons = document.querySelectorAll('button');
      buttons.forEach(button => {
        button.addEventListener('click', function() {
          this.classList.add('scale-95');
          setTimeout(() => {
            this.classList.remove('scale-95');
          }, 150);
        });
      });
    });
  </script>
</body>
</html>
